<template>

  <a-modal
      :close-on-click-modal="false"
      :open="api.editState.visible"
      :title="api.editState.title"
      destroy-on-close
      ok-text="保存"
      @cancel="api.onCloseEdit()"
      @ok="onSubmit"
  >
    <a-form
        ref="formRef"
        :model="api.editState.form"
        :rules="rules"
        :label-col="{ span: 6 }"
    >

      <a-form-item
          label="类型名称"
          name="itemName"
      >
        <a-input
            v-model:value="api.editState.form.itemName"
            clearable placeholder="数据字典类型名称"
        />
      </a-form-item>

      <a-form-item
          label="类型编码"
          name="type"
      >
        <a-input
            v-model:value="api.editState.form.type"
            clearable
            disabled
            placeholder="数据字典类型编码"
        />
      </a-form-item>

      <a-form-item
          v-if="api.editState.form.parentId !== '0'"
          allow-clear
          label="类型编码"
          name="itemValue"
      >
        <a-input
            v-model:value="api.editState.form.itemValue"
            clearable
            placeholder="数据字典类型编码"
        />
      </a-form-item>

      <a-form-item
          v-if="api.editState.form.parentId !== '0'"
          allow-clear
          label="取值字段"
          name="itemCode"
      >
        <a-input
            v-model:value="api.editState.form.itemCode"
            clearable
            placeholder="数据字典取值字段"
        />
      </a-form-item>

      <a-form-item
          label="排序号"
          name="sortId"
      >
        <a-input-number
            v-model:value="api.editState.form.sortId"
            clearable placeholder="数据字典排序号"
        />
      </a-form-item>

      <a-form-item
          label="备注信息"
          name="description"
      >

        <a-input
            v-model:value="api.editState.form.description"
            :rows="2"
            placeholder="数据字典备注信息"
            type="textarea"
        />
      </a-form-item>

    </a-form>
  </a-modal>
</template>

<script setup lang="ts">
import {reactive, ref, watch} from "vue";
import {DicApi} from "~/api/system/dic.api";

interface Props {
  api: DicApi;
}

const { api } = withDefaults(defineProps<Props>(), {});

const formRef = ref();
const rules = reactive<any>({
  type: [{ required: true, message: "请输入类型编码", trigger: "blur" }],
  itemName: [{ required: true, message: "请输入数据字典类型名称", trigger: "blur" }],
  itemValue: [{ required: true, message: "请输入数据字典类型存储值", trigger: "blur" }],
  itemCode: [{ required: true, message: "请输入数据字典取值字段", trigger: "blur" }],
});

async function onSubmit() {
  const values = await formRef.value.validate();
  if (values) {
    api.submit(api.editState.form).then((res: any) => {
      if (res.ok) {
        api.onCloseCreate();
      }
    });
  }
}

</script>

<style scoped lang="scss">

</style>
